<template>
    <div id="app" class="page-follow" :class="{'page-loading':pageLoading||(list.length == 0 && is_end),'bg-white':list.length == 0 && is_end}">
        <scroll-fixed>
            <page-bar @right="moreConfig.status = true">
                <div slot="middle" class="header-middle">{{title}}</div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <ui-loading v-if="pageLoading">
            <div slot="content"></div>
        </ui-loading>
        <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>
        <scroll-list ref="scroll" v-else class="ui-list" :disabled="true" :config="scroll" @bottom="loadmore">      
            <a class="follow-item" v-for="item in list" :key="item.member_id">
                <div class="info-wrap" @click="goPersonel(item.member_id)">
                    <div class="info-photo"> 
                        <img v-if="!item.head_img" src="../assets/icon-un-login.png" />
                        <img v-else :src="item.head_img" alt="">
                        <i class="info-vip" v-if="user.level_id>0 && item.level_id>0"></i>
                    </div>
                    <div class="info-text">
                        <div class="info-name">{{item.nickname}}</div>
                        <div class="info-level" v-if="user.level_id>0 && item.level_id>0">VIP{{item.level_id}}</div>
                    </div>
                </div>
                <a href="javascript:;" class="follow" @click="follow(item)" :class="{'on':item.is_focus}">{{item.is_focus ? '已关注' : '+ 关注'}}</a>
            </a>
        </scroll-list>
        <page-error v-if="!list.length">
            <template slot="logo">
                <img src="../assets/empty-follow.png" class="logo">
            </template>
            <template slot="text">
                <p class="text">暂无{{type == 1 ? "关注" : "粉丝"}}</p>
            </template>
        </page-error>
        <offline />
    </div>
</template>
<script>
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'
import UILoading from '../components/loading.vue'
import pageError from '../components/pageError.vue'
import offline from '../components/offline.vue'
import ScrollList from "../components/scrollList.vue";

export default {
    name:'follow',
    data(){
        return {
            total:0,
            page_no:1,
            pageLoading:false,
            pageError:false,
            is_end:false,
            title:'',
            type:1,//1 关注列表 2 粉丝列表
            scroll:{
                bottom:false
            },
            user:this.$utils.user,
            list:[]
        }
    },
    components:{
        [pageBar.name]:pageBar,
        [scrollFixed.name]:scrollFixed,
        [pageError.name]:pageError,
        [offline.name]:offline,
        [UILoading.name]:UILoading,
        [ScrollList.name]:ScrollList,
    },
    mounted(){
        this.$on('pageRefresh',()=>{
            this.pageLoading = true;
            this.loadPage().then(()=>{
                this.$nextTick(() => {
                    this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.is_end ? 'done' : false);
                });
            }).catch(e=>{
                this.pageError = true;
            }).finally(()=>{
                this.pageLoading = false;
            });
        })

        let parse = this.$utils.urlFactory.parse(location.search);
        if(parse && parse.id){
            this.id = parse.id;
            this.type = parse.type || 1;
            this.title = (this.$utils.user.id == this.id ? "我" : "TA") + "的" + (this.type == 1 ? '关注' : '粉丝')
            this.$emit('pageRefresh');
        }else{
            this.$toast('参数有误').then(()=>{
                history.back();
            })
        }
    },
    methods:{
        goPersonel (id) {
            if(id != this.user.id) {
                location.href = this.$config.pages.profile+'?id='+ id;
            }
        },
        loadPage(){
            let url = "?ct=member_focus&ac=" + (this.type == 1 ? "my_focus" : "my_fans");
            let params = {
                member_id: this.id,
                page_no:this.page_no
            }
            return this.$http.get(url,{params}).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    this.is_end = !data.data.is_have_data;
                    this.list = this.list.concat(data.data.list);
                    this.page_no++;
                }else{
                    this.$toast(data.msg);
                }
            }).catch(e=>{
                this.$toast('获取评论数据失败');
            })
        },
        pageRefresh(){
            this.pageError = false;
            this.$emit('pageRefresh');
        },
        loadmore() {
            if (this.is_end|| this.scroll.bottom) return false;
            this.scroll.bottom = true;
            this.loadPage().then(() => {
                this.$nextTick(() => {
                    this.scroll.bottom = this.is_end ? 'done' : false;
                });
            });
        },
        follow(item){
            if(item._fouce_loading) return;
            let isFollw = !!item.is_focus;
            item._fouce_loading = true;
            let url = isFollw ? '?ct=member_focus&ac=del_focus' : '?ct=member_focus&ac=add_focus';
            this.$http.post(url,{
                member_id:item.id
            }).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        item.is_focus = isFollw ? 0 : 1;
                        this.$toast((isFollw ? '取消': '关注') + "成功");
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                })
                .finally(() => {
                    item._fouce_loading= false;
                });
        },
    }
}
</script>
<style lang="less">
.page-follow {
    .page-bar {
        border-bottom:1px solid #efefef;
    }
    .header-middle {
        transition: opacity .2s;
        font-size:34px;
        color:#141414;
    }
    .follow-item {
        padding:18px 30px;
        display: flex;
        height:70px;
        box-sizing: content-box;
        background-color:#fff;
        align-items: center;
    }
    .info-wrap {
        display: flex;
        flex:1;
        height:100%;
        overflow: hidden;
    }
    .info-text {
        flex:1;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .info-photo{
        position: relative;
        margin-right: 18px;
        width: 70px;
        height: 70px;
        flex-grow: 0;
        flex-shrink: 0;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%; 
        }

        .info-vip {
            display: inline-block;
            position: absolute;
            right: 0px;
            bottom: 0;
            width: 24px;
            height: 22px;
            background-image: url("../assets/comment-vip.png");
            background-size: 100% 100%;
        }
    }

    .info-name {
        font-size: 28px;
        font-weight: bold;
        color: #282828;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .info-level {
        margin-top:12px;
        color: #919191;
        font-size: 24px;
    }

    .follow {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: inherit;
        flex-shrink: 0;
        flex-grow: 0;
        // width: 110px;
        padding:0 10px;
        height:40px;
        border-radius: 20px;
        font-size:24px;
        color:#5a4640;
        border:2px solid #e2e2e2;

        &.on {
            text-indent: 26px;
            color:#999;
            background-image:url(../assets/icon-right.png);
            background-size:18px 13px;
            background-repeat: no-repeat;
            background-position:6px center;
        }
    }
}
</style>


